import React = require("react");
import { DesignView } from "controls/design-view";
import { PageProps } from "maishu-chitu-react";
import { PageDataRecord } from "entities";
import { pageDatas, defaultPageDatas } from "services/page-datas";
import { LocalService } from "services/local-service";
import * as chitu from "maishu-chitu";
import { ShoppingService } from "services/shopping";
import { GridViewDataCell, BoundField, CustomField, CommandField, GridViewCell } from "maishu-wuzhui";
import { createGridView } from "maishu-wuzhui-helper";
import ReactDOM = require("react-dom");
import { dataSources } from "services/dataSources";


interface State {
    pageDataRecord: PageDataRecord
}

// export default function (page: chitu.Page) {

//     let shopping = page.createService(ShoppingService);



//     ReactDOM.render(<CouponListPage />, page.element);
// }

export default class CouponListPage extends React.Component<PageProps, {}>{
    private couponsTable: HTMLTableElement;
    // private itemEditor: wz.GridViewItemPopupEditor;

    componentDidMount() {
        let self = this;
        let gridView = createGridView({
            element: this.couponsTable,
            dataSource: dataSources.coupon,
            columns: [
                new BoundField({ dataField: 'Title', headerText: '名称' }),
                // new ui.BoundField({ dataField: 'Title', headerText: '标题' }),
                new CustomField({
                    createItemCell(dataItem: Coupon) {
                        let cell = new GridViewDataCell({
                            render(value: Coupon, element) {
                                ReactDOM.render(
                                    <div>
                                        <span>{value.ValidBegin.toLocaleDateString()}</span>
                                        <span> 至 </span>
                                        <span>{value.ValidEnd.toLocaleDateString()}</span>
                                    </div>,
                                    cell.element);
                                // wuzhui.Control.getControlByElement(cell.element.parentElement);
                            }
                        });

                        return cell;
                    },
                    headerText: '有效期'
                }),
                new BoundField({
                    dataField: 'Discount', headerText: '折扣金额', dataFormatString: '￥{C2}',
                    itemStyle: { textAlign: 'right' } as CSSStyleDeclaration
                }),
                new BoundField({
                    dataField: 'Amount', headerText: '使用金额', dataFormatString: '￥{C2}',
                    itemStyle: { textAlign: 'right' } as CSSStyleDeclaration
                }),
                new CustomField<Coupon>({
                    headerStyle: { width: '100px' } as CSSStyleDeclaration,
                    itemStyle: { textAlign: "center" },
                    headerText: "操作",
                    createItemCell(dataItem) {
                        let cell = new GridViewCell();
                        ReactDOM.render(<>
                            <button className="btn btn-minier btn-info"
                                onClick={() => self.props.app.redirect("coupon/coupon-edit", { id: dataItem.Id })}>
                                <i className="icon-pencil"></i>
                            </button>
                            <button className="btn btn-minier btn-danger"
                                onClick={() => self.props.app.redirect("coupon/coupon-edit", { id: dataItem.Id })}>
                                <i className="icon-pencil"></i>
                            </button>
                        </>, cell.element);
                        return cell;
                    }
                })
            ]
        })

    }
    render() {
        return (
            <div>
                <div className="tabbable">
                    <ul className="nav nav-tabs">
                        <li className="pull-left active">
                            <a>全部</a>
                        </li>
                        <li data-bind="visible:currentIndex()==0" className="pull-right">
                            <button onClick={() => this.props.app.redirect("coupon/coupon-edit")} className="btn btn-sm btn-primary" title="点击添加优惠券">
                                <i className="icon-plus" />
                                <span>添加</span>
                            </button>
                        </li>
                    </ul>
                </div>
                <table ref={(o: HTMLTableElement) => this.couponsTable = this.couponsTable || o}></table>
                {/* <wz.GridViewItemPopupEditor name="优惠劵" saveDataItem={(dataItem) => Promise.resolve({})}>
                </wz.GridViewItemPopupEditor> */}
            </div>
        );
    }
}